<template>
	<view class="main">
		<view class="box box-tb box-pack-center box-align-center mt100">
			<u-image src="https://www.wytldy.com/file/20230624/1687610421539logo.jpg" :fade="false" width="100rpx"
				height="100rpx"></u-image>
			<!-- <image src="../../static/indexLogo.png" mode="" style="width: 100rpx;height: 100rpx; border-radius: 50%;"> -->
			</image>
			<text class="h3 mt10">欢迎登录</text>
			<text class="mt10" style="font-size: 36rpx;">五育通·劳动教育云</text>
		</view>
		<view class="mt100 noL">
			<!-- <button class="btn box box-pack-center box-align-center" open-type="chooseAvatar"
				@chooseavatar="chooseAvatar">
				<image src="https://www.wytldy.com/file/wxIMG/images/wx.png" style="width: 57rpx;height: 47rpx;">
				</image>
				<text class="ml5">微信一键登录</text>
			</button> -->
			<button class="btn box box-pack-center box-align-center" open-type="getPhoneNumber"
				@getphonenumber="getPhoneNumber" style="outline: none;" v-if="checked">
				<text class="ml5">手机号快捷登录</text>
			</button>
			<button class="btn box box-pack-center box-align-center" @click="handleAlow" style="outline: none;" v-else>
				<text class="ml5">手机号快捷登录</text>
			</button>
			<button class="login-btn mt20" @click="goAccount" style="outline: none;">账号/手机登录</button>
			<view class="footer" style="margin-top: 20rpx;">
				<u-checkbox-group>
					<u-checkbox :customStyle="{marginBottom: '16rpx'}" v-model="checked">
					</u-checkbox>
					<view style="display: flex;font-size: 24rpx;margin-left: -30rpx;">
						已阅读并同意 <navigator url="/pageHome/Authentication/Authentication?type=1" style="color:#2677F3;">
							《用户协议》
						</navigator> 和 <navigator url="/pageHome/Authentication/Authentication?type=2"
							style="color:#2677F3;">《隐私协议》</navigator>
					</view>
				</u-checkbox-group>
			</view>
			<view class="uni_noLogin" @click="NoLogin">
				暂不登录
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false,
				openid: ''
			};
		},
		onLoad() {
			this.getUnionidOnly()
		},
		methods: {
			chooseAvatar(e) {
				console.log(e);
				this.checked = true
				this.getUnionidOnly()
			},
			getUnionidOnly() {
				let _this = this;
				wx.login({
					success: res => {
						_this.$api.post({
							url: '/comm/getAppletUnionid'
						}, {
							code: res.code
						}).then(s => {
							// _this.loginByOpenID(s.openid)
							_this.openid = s.openid
							uni.setStorageSync("openid", s.openid)
						})
					}
				})
			},
			loginByOpenID(openid) {
				this.$api.post({
					url: '/wxLogin',
					method: 'post'
				}, {
					openid: openid
				}, true).then(res => {
					console.log(res)
					if (res.code == 0) {
						uni.setStorageSync("user", res.user);
						uni.setStorageSync('token', res.token || '111444');
						// this.getCurrentSchool(res.user.schoolId)
						uni.setStorageSync("currSchool", res.school)
						if (res.roles != undefined) {
							uni.setStorageSync("roles", res.roles);
							uni.setStorageSync('role', res.roles.filter(o => o != `jyzz`)[0]);
						}

						uni.reLaunch({
							url: "/pages/index/index"
						})
					}

				})
			},
			//获取当前学校
			getCurrentSchool(id) {
				this.$api.post({
					url: '/yschool/getById'
				}, {
					id: id
				}).then(res => {
					uni.setStorageSync("currSchool", res.school)
				})
			},

			// 点击账号登录
			goAccount() {
				uni.navigateTo({
					url: "/pageHome/accout/accout"
				})
			},
			Login(mobile) {
				this.$api.post({
					url: '/mobileLogin',
					method: 'post'
				}, {
					mobile: mobile,
					openid: this.openid
				}, true).then(res => {
					console.log(res)
					if (res.code == 0) {
						uni.setStorageSync("user", res.user);
						uni.setStorageSync('token', res.token);
						// this.getCurrentSchool(res.user.schoolId)
						uni.setStorageSync("currSchool", res.school)
						if (res.roles != undefined) {
							uni.setStorageSync("roles", res.roles);
							uni.setStorageSync('role', res.roles.filter(o => o != `jyzz`)[0]);
						}

						uni.reLaunch({
							url: "/pages/index/index"
						})
					}

				})
			},
			// 暂无登录
			NoLogin() {
				uni.clearStorageSync();
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
			//未阅读点击事件
			handleAlow() {
				uni.showToast({
					title: "请先阅读并同意《用户协议》和《隐私协议》",
					icon: 'none'
				})
			},

			// 点击微信登录
			getPhoneNumber(e) {
				let _this = this
				console.log(e);
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					//获取手机号后续操作
					//微信登录获取code
					_this.$api.post({
						url: '/comm/getPhoneNumber'
					}, {
						code: e.detail.code
					}).then(s => {
						console.log(s.data.phone_info.phoneNumber);
						//手机号登录/注册
						uni.setStorageSync("mobile", s.data.phone_info.phoneNumber)
						_this.Login(s.data.phone_info.phoneNumber)
					})
				} else {
					uni.navigateTo({
						url: "/pageHome/accout/accout"
					})
				}

			}
		},
	}
</script>

<style scoped lang="scss">
	.main {
		box-sizing: border-box;
		background-color: #fff;
		width: 100%;
		height: 100%;
	}


	.h3 {
		font-size: 55rpx;
		font-weight: bold;
	}

	.login-btn {
		width: 602rpx;
		background-color: #D9E4FD;
		color: #5257FF;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 30rpx;
		border-color: #fff;
		font-size: 34rpx;
	}

	// 暂不登录
	.uni_noLogin {
		font-size: 32rpx;
		color: #38393B;
		text-align: center;
		margin-top: 240rpx;
	}

	.btn {
		width: 602rpx;
		background-color: #5257FF;
		color: #fff;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 30rpx;
		border-color: #fff;
		font-size: 34rpx;
	}

	.footer {
		margin: 20rpx auto;
		text-align: center;
		width: 100%;
	}

	/deep/ .u-checkbox-group {
		width: 100%;
	}

	/deep/.u-checkbox-group .u-checkbox {
		height: auto;
		padding: 0 !important;
	}

	/deep/ .u-checkbox-group {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>